<template>
  <div class="box">
    <!-- 头部 -->
    <Header></Header>

    <!-- 路由 商品主体-->
    <div class="content1">
      <ul>
        <router-link to="/goods">商品</router-link>
        <router-link to="/pinjia">评价</router-link>
        <router-link to="/business">商家</router-link>
      </ul>
      
    </div>

    <div class="gundong">
      <router-view ></router-view>
    </div>

    <!-- 底部购物车 -->
    <div class="cart" > 
      <div class="cartLeft" @click="showCar()">
        <span class="price"> {{ '￥' + getPrice}}</span>
        <img src="./img/20221115161623.png" alt="">
      </div>
      <div class="cartCenter">
        <div class="pei">另需配送费￥4元</div>
      </div>
      <div class="cartRight">20元起送</div>

      <div class="zheZha" v-show="show" >
        <div class="cartList">
          <div class="listTop">
            <p>购物车</p>
            <p class="kong" @click="kong">清空</p>
          </div>
          <ul class="goods"  >
            <li v-for="item in carList" :key="item.name">
              <h4  v-show="item.count > 0">{{item.name}}</h4>  
              <div class="div22" v-show="item.count > 0">{{item.price}}</div>
              <div class="btndiv" v-show="item.count > 0">
                
                <btns class="btns" :item="item">
                  
                </btns>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  import { mapState } from 'vuex';
  import Header from './Header.vue';
  import btns from './views/btns.vue'
  export default {
    
    data() {
      return {
        show: false,
        counts:[]
      }
    },
    mounted(){
      // console.log(this.carList)
      
    },
    methods:{
      showCar() {
            this.show = !this.show;
      },
      kong(){
            for(let j = 0;j<this.carList.length;j++){
                this.carList[j].count = 0
            }
        }
    },
    components:{
      Header,
      btns,
    },
    computed:{
      ...mapState(['carList','price','show']),
      getPrice() {
      let num = 0;
      this.carList.forEach((item) => {
        num += item.price * item.count;
      });
      return num;
    },
    }
  }
</script>

<style lang="less" scoped>
  .box{
    height: 100vh;
    overflow: scroll;
    .content1{
    height: 40px;
    font-size: 14px;
    
    line-height: 40px;
    border-bottom: 1px solid #E5E5E5;
    ul{
      height: 100vh;
      overflow: scroll;
      display: flex;
      justify-content: space-around;
      a{
        color: rgb(77,85,93);
      }
      a:hover{
        color: rgb(240,20,20);
      }
    }
  }
  .cart{
      float: left;
      position: relative;
      width: 100vw;
      background-color: black;
      position: fixed;
      bottom: 0px;
      height: 52px;
      color: #fff;
      display: flex;
      justify-content: space-around;
      line-height: 52px;
      
      .cartLeft{
        z-index: 100;
        position: relative;
        top: -20px;
        left: -30px;
        width: 60px;
        height: 60px;
        background-color: black;
        border-radius: 30px;
        color: #929396;
        font-weight: 600;
        img{
          width: 50px;
          height: 50px;
          border-radius: 25px;
          position: absolute;
          left: 5px;
          top: 5px;
        }
        .price{
          position: absolute;
          top: 20px;
          left: 70px;
        }
      }
      .cartCenter{
        .pei{
          color: #858992;
          font-size: 12px;
          position: relative;
          left: -80px;
        }
      }
      .cartRight{
        width: 100px;
        background-color: #2B343B;
        position: absolute;
        right: 0px;
        text-align: center;
        color: #94979C;
      }
      .zheZha{
        z-index: 1;
        position: fixed;
        height: 100vh;
        width: 100vw;
        background-color: rgba(0 , 0, 0, .5);
        top: 0px;
        left: 0px;
        .cartList{
          height: 200px;
          width: 100vw;
          background-color: #fff;
          position: absolute;
          bottom: 53px;
          color: black;
          overflow: hidden;
          
          .listTop{
            height: 40px;
            background-color: #F4F5F7;
            font-size: 14px;
            line-height: 40px;
            display: flex;
            justify-content: space-between;
            .kong{
              color: #03A4DA;
            }
          }
          .goods{
            overflow: scroll;
            li{
              display: flex;
              justify-content: space-between;
              
              h4{
                width: 150px;
              }
              .btndiv{
                position: relative;
                
                .btns{
                  position: absolute;
                  top: 15px;
                  
                }
              }
              
            }
          }
        }
      }
  }
  }
</style>